<template>
    <el-form :model="form" ref="form" label-width="80px" label-position="right" class="form-container">
        <div class="content">
            <el-form-item label="票据类型">
                <el-radio-group v-model="form.billTypeId" @change="changeOption()">
                    <el-radio :label="101">电票</el-radio>
                    <el-radio :label="102">纸票</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="周期" v-if="form.billTypeId == 101">
                <el-radio-group v-model="form.number" @change="changeOption()">
                    <el-radio :label="6">半年</el-radio>
                    <el-radio :label="12">一年</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row>
                <el-col :span="4">
                    <el-select v-model="form.year" @change="changeOption()">
                        <el-option v-for="item in yearOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" :offset="1">
                    <el-select v-model="form.month" @change="changeOption()">
                        <el-option v-for="item in monthOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset="1">
                    <el-button type="primary" @click="returnDay()">回到今天</el-button>
                </el-col>
            </el-row>
            <el-container>
                <el-main>
                    <el-row>
                        <el-col :span="3">一</el-col>
                        <el-col :span="3">二</el-col>
                        <el-col :span="3">三</el-col>
                        <el-col :span="3">四</el-col>
                        <el-col :span="3">五</el-col>
                        <el-col :span="3" class="rest">六</el-col>
                        <el-col :span="3" class="rest">日</el-col>
                    </el-row>
                    <el-row v-for="(row,index) in newData" :key="index">
                        <el-col :span="3" v-for="(col,index) in row" :key="index" :class="{rest:col.day_status=='休息',today:col.id==today && form.month == month && form.year == year}">
                            <span>{{col.id}}</span>
                            <span class="tag">
                                {{col.day_status=='休息' ? '休息' : col.bill_calendar_days}}
                                {{col.day_status=='休息' || col.day_status=='' ? '' : '天'}}
                            </span>
                        </el-col>
                    </el-row>
                </el-main>
            </el-container>
        </div>
    </el-form>
</template>

<script lang="ts">
  import {Vue, Component} from 'vue-property-decorator'
  
    @Component
    export default class Calendar extends Vue {

    //data
        form = {
            billTypeId: 101,
            number: 6,
            year: new Date().getFullYear(),
            month: new Date().getMonth()+1
        }
        calData:Array<any> = [];
        newData:Array<any> = [];
        today:number = new Date().getDate();
        month:number = new Date().getMonth()+1
        year:number = new Date().getFullYear()
        yearOptions = [{
                value: 2019,
                label: '2019年'
            }, {
                value: 2018,
                label: '2018年'
            }, {
                value: 2017,
                label: '2017年'
        }]
        monthOption = [{
                value: 1,
                label: '1月'
            },{
                value: 2,
                label: '2月'
            },{
                value: 3,
                label: '3月'
            },{
                value: 4,
                label: '4月'
            },{
                value: 5,
                label: '5月'
            },{
                value: 6,
                label: '6月'
            },{
                value: 7,
                label: '7月'
            },{
                value: 8,
                label: '8月'
            },{
                value: 9,
                label: '9月'
            },{
                value: 10,
                label: '10月'
            },{
                value: 11,
                label: '11月'
            },{
                value: 12,
                label: '12月'
        }]
        

    //methods
        //更换条件
        changeOption () {
            if(this.form.billTypeId == 102){
                this.form.number = 6
            }
            this.getCalendar(this.form)
        }
        //回到今天
        returnDay () {
            this.form.year = new Date().getFullYear()
            this.form.month = new Date().getMonth()+1
            this.getCalendar(this.form)
        }
        //获取贴现日历数据
        async getCalendar (form:object) {
            let params = {
                ...form
            }
            let res = await this.$http.get('tools/calendar',{ params },{loading:false});
            this.calData = res.data
            
            let weekArray = new Array(7,1,2,3,4,5,6);
            let weekDay = weekArray[new Date(this.calData[0].day).getDay()]; //获取当月1号是周几
            let firstArrLen = 7 - weekDay + 1   //第一行数组长度
            let firstArr = [this.calData.slice(0,firstArrLen)] //第一行日期的数组
            this.calData.splice(0,firstArrLen)  //去除第一行之后的数组
            this.sliceArr(this.calData,7).then(result => {  //按7个一组拆分
                this.newData = [...firstArr, ...result]
                if(weekDay !== 1){  //1号不是周一
                    let voidObj = {
                        id: '',
                        day_status: '',
                        bill_calendar_days: '',
                    }
                    let fillArr = Array(weekDay-1).fill(voidObj);
                    this.newData[0] = [...fillArr,...this.newData[0]]
                }
            })
        }
        //拆分
        async sliceArr(array:object[], size:number) {
            let result = [];
            for (let x = 0; x < Math.ceil(array.length / size); x++) {
                let start = x * size;
                    let end = start + size;
                    result.push(array.slice(start, end));
                }
            return result;
        }
        
        mounted () {
            this.getCalendar(this.form)
        }
    }

</script>

<style lang="scss" scoped>
    .el-form{
        width: 100%;
    }
    .content{
        width: 40%;
        margin: 0 auto;
        font-size: 1.4rem;
        padding: 60px 0;
        padding-bottom: 100px;
        .el-row{
            margin: 0 auto;
            .el-col{
                text-align: center;
            }
        }
        .el-container{
            .el-row{
                height: 4.9rem;
                line-height: 4.9rem;
                border-bottom: 1px solid $__color-line;
                .el-col{
                    height: 100%;
                    width: 14.2% !important;
                    span{
                        display: block;
                        height: 2.4rem;
                        line-height: 2.4rem;
                    }
                }
            }
        }
    }
    
    .rest{
        color: $__color-remind;
    }
    .today{
        background: $__color-primary;
        color: #fff;
    }
</style>
<style lang="scss">
    .form-container{
        .el-form-item__label{
            font-size: 16px;
        }
        .el-radio__label{
            font-size: 16px;
        }
    }
</style>